<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- hgroup -->
    <style>
        hgroup {
            text-align: right;
            font-family: Verdana, sans-serif;
            padding-right: 16px;
            border-right: 10px solid #00c8d7;
        }

        h1 {
            font-size: 1.93rem;
            margin-bottom: 0;
        }

        h2 {
            font-size: 1.16rem;
            margin-top: 0;
        }

        p {
            text-align: justify;
            font-family: Georgia, serif;
            font-size: .95rem;
        }

        p::first-letter {
            font-size: 3.2rem;
            line-height: .7;
            float: left;
            padding-right: 8px;
            padding-top: 4px;
        }
    </style>

</head>

<body>

    <!-- hgroup -->
    <!-- HTML <hgroup> element代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起。 -->
    <!-- 使用笔记 -->
    <!-- 注意: 本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。  -->
    <!-- 然而，考虑到<hgroup>元素的一个关键存在目标是明确HTML规范中如何显示标题的轮廓算法，但因为其轮廓算法(outline algorithm)未在任何浏览器中实现，因此 <hgroup> 语义仍旧是理论上的建议。 -->
    <hgroup>
        <h1>BookYourHotel</h1>
        <h2>Rating of the Hotels</h2>
        <h6>Local Sight Seeing</h6>
    </hgroup>

    <hgroup id="document-title">
        <h1>HTML</h1>
        <h2>Living Standard — Last Updated 12 August 2016</h2>
    </hgroup>
    <p>Some intro to the document.</p>
    <h2>Table of contents</h2>
    <ol id=toc>...</ol>
    <h2>First section</h2>
    <p>Some intro to the first section.</p>

</body>

</html>